<script setup>
const emit = defineEmits(["changeTab"]);
const changeTab = (id) => {
    //子组件用emit向父组件触发一个事件
    emit("changeTab", id);
};

const props = defineProps({
    tabList: {
        type: Array,
        default: () => {
            return [];
        },
    },
});
</script>
<template>
    <div class="row py-6">
        <div class="col-lg-12">
            <div class="nav-wrapper position-relative end-0">
                <ul class="nav nav-pills nav-fill" role="tablist">
                    <li class="nav-item" v-for="(item, index) in tabList" :key="index">
                        <a :class="`uppercase nav-link mb-0 px-0 py-3 text-f-Montserrat-Regular ${item.id == 1 ? 'active' : ''}`" data-bs-toggle="tab" href="#profile-tabs-simple" role="tab" aria-controls="profile" :aria-selected="item.id == 1 ? true : false" @click="changeTab(item.id)">
                            {{ item.name }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<style scoped>
.nav.nav-pills .nav-link.active {
    background: rgba(222, 39, 38, 1);
    color: #fff;
}
.nav.nav-pills {
    background: #000;
    border: none;
}
.nav.nav-pills .nav-link {
    color: #fff;
    padding: 10px !important;
}
.nav.nav-pills .nav-link:hover:not(.active) {
    color: #fff;
}
</style>
